//设置--添加配送区域
import React from "react";
import "./css/add-delivery-area.css";
import PageTitle from "../../component/set/PageTitle";
import IconFont from "../../component/logo";
import SetButton from "../../component/set/SetBtton";
import "./css/StoreInfo.css";
import { Form, Input, Checkbox, Cascader, Radio } from "antd";

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 12 },
};
const options = [
  {
    value: "zhejiang",
    label: "Zhejiang",
    children: [
      {
        value: "hangzhou",
        label: "Hangzhou",
        children: [
          {
            value: "xihu",
            label: "West Lake",
          },
        ],
      },
    ],
  },
  {
    value: "jiangsu",
    label: "Jiangsu",
    children: [
      {
        value: "nanjing",
        label: "Nanjing",
        children: [
          {
            value: "zhonghuamen",
            label: "Zhong Hua Men",
          },
        ],
      },
    ],
  },
];

const checkBoxOptions = [
  { label: "罗湖区", value: "Apple" },
  { label: "南山区", value: "Pear" },
];

class AddDeliveryArea extends React.Component {
  render() {
    return (
      <div className="add_delivery_area">
        <PageTitle
          title="添加配送区域"
          icon={<IconFont type="icon-quyu1"></IconFont>}
          btn={<SetButton txt="返回区域列表"></SetButton>}
        ></PageTitle>
        <div className="areaForm storeInfo">
          <Form {...layout} name="infoOne">
            <Form.Item
              label="配送区域名称"
              name="storeName"
              rules={[{ required: true, message: "请输入配送区域名称" }]}
            >
              <Input className="info-border"></Input>
            </Form.Item>
            <div className="formTwo">
              <Form.Item
                label="费用计算方式"
                name="storeTitle"
                rules={[{ required: true, message: "请选择费用计算方式" }]}
              >
                <Radio.Group defaultValue={1}>
                  <Radio value={1}>按重量计算</Radio>
                  <Radio value={2}>按商品件数计算</Radio>
                </Radio.Group>
              </Form.Item>
            </div>
            <Form.Item
              label="首重费用"
              name="storeDescribe"
              rules={[{ required: true, message: "请输入首重费用" }]}
            >
              <Input className="info-border"></Input>
            </Form.Item>
            <Form.Item
              label="续重费用"
              name="storeKeyWorlds"
              rules={[{ required: true, message: "请输入续重费用" }]}
            >
              <Input className="info-border"></Input>
            </Form.Item>
            <Form.Item
              label="免费额度"
              name="storeKeyWorlds"
              rules={[{ required: true, message: "请输入免费额度" }]}
            >
              <Input className="info-border"></Input>
            </Form.Item>
            <div className="formTwo">
              <Form.Item
                label="所辖地区"
                name="storeKeyWorlds"
                rules={[{ required: true, message: "请选择所辖地区" }]}
              >
                <Checkbox.Group
                  options={checkBoxOptions}
                  defaultValue={["Apple"]}
                ></Checkbox.Group>
              </Form.Item>
            </div>

            <Form.Item
              label="所在地区"
              name="storeArea"
              rules={[{ required: true, message: "请选择所在地区" }]}
            >
              <Cascader
                options={options}
                placeholder="请选择所在地区"
              ></Cascader>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}

export default AddDeliveryArea;
